<template>
  <div>
    <Table ref="table" :columns="columns" :fuc="page" :formState="formState" @reset="reset">
      <template #form>
        <FormItem label="用户名" name="username">
          <Input v-model:value="formState.username" allow-clear placeholder="用户名" />
        </FormItem>
        <FormItem label="昵称" name="nickname">
          <Input v-model:value="formState.nickname" allow-clear placeholder="昵称" />
        </FormItem>
        <FormItem label="邮箱" name="email">
          <Input v-model:value="formState.nickname" allow-clear placeholder="邮箱" />
        </FormItem>
      </template>
      <template #toolBtn>
        <Button type="primary" @click="onAddBtn">添加</Button>
      </template>
      <template #format="{ record, column }">
        <template v-if="column.dataIndex === 'avatar' && record.avatar">
          <img class="avatar" :src="record.avatar" />
        </template>
        <template v-if="column.dataIndex === 'blackList'">
          {{ record.blackList ? '是' : '否' }}
        </template>
      </template>
      <template #operation="{ record }">
        <Space>
          <a @click="handleEdit(record)">设置角色</a>
          <a @click="handleBlackList(record)" v-if="record.blackList">取消黑名单</a>
          <a @click="handleBlackList(record)" v-else>加入黑名单</a>
        </Space>
      </template>
    </Table>

    <!-- 新增 -->
    <Drawer
      title="新增用户"
      placement="right"
      :visible="addVisible"
      @close="onAddClose"
      width="500"
    >
      <Add v-if="addVisible" @on-success="handleSuccess" />
    </Drawer>

    <Drawer
      title="设置角色"
      placement="right"
      :visible="roleVisible"
      width="500"
      @close="onRoleClose"
    >
      <UserRole v-if="roleVisible" :user-id="userId" @on-success="onRoleClose" />
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { page, updateBlackList } from '/@/api/sys/user'
  import { Table } from '/@/components/Table'
  import { FormItem, Input, Button, Drawer, Space } from 'ant-design-vue'
  import Add from './Add.vue'
  import UserRole from './UserRole.vue'

  const table: any = ref(null)

  const columns = [
    {
      title: '用户编号',
      dataIndex: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '头像',
      dataIndex: 'avatar',
    },
    {
      title: '黑名单',
      dataIndex: 'blackList',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ]

  const formState = ref({
    username: '',
    nickname: '',
    email: '',
  })

  const reset = () => {
    formState.value = {
      username: '',
      nickname: '',
      email: '',
    }
  }

  const addVisible = ref(false)
  const onAddBtn = () => {
    addVisible.value = true
  }
  const onAddClose = () => (addVisible.value = false)
  const handleSuccess = () => {
    onAddClose()
    table.value.handleQuery()
  }

  const userId = ref('')
  const roleVisible = ref(false)
  const handleEdit = (record) => {
    userId.value = record.id
    roleVisible.value = true
  }
  const onRoleClose = () => (roleVisible.value = false)

  const handleBlackList = (record) => {
    updateBlackList(record.id).then(() => {
      table.value.handleQuery()
    })
  }
</script>

<style scoped>
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
</style>
